<template>
  <el-tree
    ref="tree"
    :data="treeData"
    show-checkbox
    node-key="id"
    @check="handleCheck"
  >
    <span slot-scope="{ node }" class="custom-tree-node">
      <span>
        <svg-icon v-if="node.data.meta && node.data.meta.icon && node.data.meta.icon !== ''" class="icon el-select" :icon-class="node.data.meta.icon" />
        <span>{{ node.label }}</span>
      </span>
      <span v-if="node.data.index > 0">
        <span>&lt;{{ node.data.index }}&gt;</span>
        <svg-icon icon-class="dashboard" />
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    treeData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      treeMap: {}
    }
  },
  methods: {
    setSelect(select, map) {
      const selectIds = []
      select.forEach(item => {
        const data = map[item]
        if (data) {
          selectIds.push(data['id'])
        }
      })
      this.$refs.tree.setCheckedKeys(selectIds)
    },
    handleCheck(data, node) {
      const nodes = node['checkedNodes']
      const selected = []
      nodes.forEach(item => {
        if (item['component'] !== 'Layout') {
          selected.push(item['component'])
        }
      })
      this.$emit('change', selected)
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
